<template>
        <div class="select_class pattern_wrap" style="background:#f6f6f6;padding-top:0.32rem;">
            <div class="row flex"  v-for="(item,index) in showData2" style="padding:0 0.3rem;margin-bottom:0.3rem;" >
                <!-- <div class="checkbox_wrap"  >
                </div>     -->
                <div class="radio_right" >
                    <div v-if=item.radioHeadPhoto class="head">
                        <img  :src="$api.formatter(item.radioHeadPhoto)" />
                    </div>
                    <div class="classroom">
                        <div class="className" v-if="item.patternName" >{{item.patternName}}</div>
                        <div class="teacher" v-if="item.remark" >{{item.remark}}</div>
                    </div>
                    <div class="right flex_column" style="flex-grow: 1" >
                        <div class="price">
                            ￥{{item.patternPrice.toFixed(2)}}
                        </div>
                    </div>
                </div>                   
            </div>
        </div>
        
    </template>

<script>
    import {
        Actionsheet
    } from 'mint-ui';
    import checkbox from '../components/checkbox'
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        data() {
            return {
                value: '1',
                selected: '1',
                title: '',
                pageSize: 10,
                pageNum1: 1,
                pageNum2: 1,
                showData1: [],
                showData2: [],
                useInfo: '',
                actions: [{
                    name: '微信支付',
                    method: this.wxpay
                }, {
                    name: '支付宝支付',
                    method: this.zfbpay
                }],
                sheetVisible: false,
            }
        },
        methods: {
            getDetail1(reflesh) {
                var url = "/servicePattern/selectPage";
                if (reflesh) {
                    this.pageNum1 = 1;
                }
                var params = {
                    pageNum: this.pageNum1,
                    pageSize: this.pageSize,
                    schoolId: this.useInfo.schoolId,
                }
                this.$api.post(url, params, (data) => {
                    if (reflesh) {
                        console.log('reflesh')
                        this.showData1 = data.info.list
                    } else {
                        data.info.list.forEach(element => {
                            this.showData1.push(element);
                        })
                        this.pageNum1 += 1;
                    }
                })
            },
            getDetail2(reflesh) {
                var url = "/servicePattern/selectPage";
                if (reflesh) {
                    this.pageNum2 = 1;
                }
                var params = {
                    pageNum: this.pageNum2,
                    pageSize: this.pageSize,
                    userId: this.useInfo.userId,
                    schoolId: this.useInfo.schoolId,
                }
                this.$api.post(url, params, (data) => {
                    if (reflesh) {
                        this.showData2 = data.info.list
                    } else {
                        data.info.list.forEach(element => {
                            this.showData2.push(element);
                        })
                        this.pageNum2 += 1;
                    }
                })
            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            back() {
                var length = 0;
                this.showData.forEach((element, index) => {
                    if (element.checked) {
                        length = length + 1;
                        var options = {
                            item: element,
                            title: this.title,
                        }
                        sessionStorage.setItem('radioBackOptions', JSON.stringify(options));
                        this.$api.goBack();
                    };
                });
                if (length == 0) {
                    MessageBox('提示', '请选择!');
                }
            },
            wxpay() { //微信支付
                console.log('微信支付')
            },
            zfbpay() { //支付宝支付
                console.log('支付宝支付')
            },
            topay() { //去支付
                if (this.totalPrice > 0) {
                    this.sheetVisible = true;
                } else {
                    MessageBox('提示', '请选择服务');
                }

            }
        },
        watch: {
            selected: function(newValue) {
                switch (newValue) {
                    // case '1':
                    //     this.getDetail1(1);
                    //     break;
                    case '2':
                        this.getDetail2(1);
                        break;

                    default:
                        break;
                }
            },

        },
        created() {
            this.getUseInfo();
            this.getDetail2(1);
        },
        computed: {
            totalPrice: function() {
                var total = 0
                this.showData1.forEach(element => {
                    if (element.checked) {
                        total = total + parseFloat(element.patternPrice);
                    }
                })
                return total;
            }
        },
        components: {
            checkbox,
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .price {
        color: #FC5F51;
        text-align: right;
        font-size: 0.42333rem;
        padding-right: 0.13334rem;
        font-weight: bold;
    }
    
    .footer {
        height: 1.37333rem;
    }
    
    .footer .left {
        font-size: 0.38666rem;
        width: 7.22666rem;
        font-weight: bold;
        color: #010101;
        height: 100%;
        text-align: right;
        padding-right: 0.88rem;
        line-height: 1.37333rem;
    }
    
    .footer .right {
        flex-grow: 1;
        height: 100%;
    }
    
    .select_class .mint-navbar {
        background: white;
        color: #A5A5A5;
    }
    
    .select_class .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 0.1rem solid #74beff;
        color: #0489ff;
        margin-bottom: 0px;
    }
    
    .classroom {
        padding-left: 0;
    }
    
    .topay {
        height: 100%;
        border: none;
        outline: none;
        font-size: 0.37333rem;
        color: white;
        background: #048Aff;
        width: 100%;
    }
</style>